<template>
    <div>
        <div class="shipper-info">
            <div class="item">
                <div class="l">客户</div>
                <div class="r">{{ goodsInfo.cusName }}</div>
            </div>
            <div class="item">
                <div class="l">商品</div>
                <div class="r">{{ goodsInfo.prodName }}</div>
            </div>
            <div class="item">
                <div class="l">数量</div>
                <div class="r">{{ goodsInfo.prodNum }}</div>
            </div>
            <div class="item">
                <div class="l">下单人</div>
                <div class="r">{{ goodsInfo.orderUserName }}</div>
            </div>
            <div class="item">
                <div class="l">下单时间</div>
                <div class="r">{{ goodsInfo.orderTime }}</div>
            </div>
        </div>
        <div class="receiver-info">
            <div class="item">
                <div class="l">收货人</div>
                <div class="r">
                    <input type="text" placeholder="请输入收货人姓名" v-model="nameVal" />
                </div>
            </div>
            <div class="item">
                <div class="l">联系电话</div>
                <div class="r">
                    <input type="text" placeholder="请输入收货人电话" v-model="telVal" />
                </div>
            </div>
            <div class="item">
                <div class="l">收货地址</div>
                <div class="r">
                    <textarea style="resize:none" placeholder="请输入收货人详细地址" v-model="addressVal"></textarea>
                </div>
            </div>
            <div class="item">
                <div class="l">物流单号</div>
                <div class="r">
                    <input type="text" placeholder="请输入物流单号" v-model="codeVal" />
                </div>
            </div>
        </div>
        <Button btn-title="确认发货信息" @tap="sendOder" />
    </div>
</template>

<script>
import Button from '@/components/Button';
import { OderInfoApi, SendOderApi } from '@/request/api';

export default {
    data() {
        return {
            goodsInfo: {},
            nameVal: '',
            telVal: '',
            addressVal: '',
            codeVal: '',
            flag: false,
        };
    },
    methods: {
        sendOder() {
            SendOderApi({
                serialNo: this.goodsInfo.serialNo,
                receiver: this.nameVal,
                linkPhone: this.telVal,
                address: this.addressVal,
                logisticsCode: this.codeVal,
            }).then(() => {
                this.flag = true;
                this.$router.back();
                return;
            });
        },
    },
    beforeRouteLeave(to, from, next) {
        to.meta.refresh = this.flag;
        next();
    },
    created() {
        OderInfoApi({
            serialNo: this.$route.query.serialNo,
        }).then((res) => {
            this.goodsInfo = res.data;
            this.codeVal = this.goodsInfo.belongUser;
        });
    },
    activated() {
        this.flag = false;
    },
    components: {
        Button,
    },
};
</script>

<style lang="less" scoped>
.shipper-info {
    border: 0.01rem solid #e5e5e5;
    border-bottom: none;
    margin-top: 0.21rem;
    color: #333;
    .item {
        height: 0.9rem;
        padding: 0 0.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 0.01rem solid #e5e5e5;
        .r {
            color: #999;
        }
    }
}
.receiver-info {
    border: 0.01rem solid #e5e5e5;
    background-color: #fff;
    padding-top: 0.5rem;
    margin-top: 0.2rem;
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
        margin-bottom: 0.3rem;
        .r {
            width: 5.44rem;
            min-height: 0.6rem;
            border-radius: 0.1rem;
            background-color: #ececec;
            padding: 0.16rem 0.35rem;
            box-sizing: border-box;
            input,
            textarea {
                background: none;
                outline: none;
                border: none;
                width: 100%;
                height: 100%;
                color: #666666;
            }
            textarea {
                height: 1.28rem;
            }
        }
    }
}
</style>
